<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.可视化数据处理的一般方法-实战练习</title>
    <style>
        #stage {
            border: 1px solid #ccc;
            width: 600px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="stage"></div>

    <!-- <script src="//lib.baomitu.com/d3/4.10.2/d3.js"></script> -->
    <script src="https://d3js.org/d3.v6.js"></script>

    <script type="module">
        import { Scene, Polyline, SpriteSvg } from 'https://unpkg.com/spritejs/dist/spritejs.esm.js';
        import { shaders } from 'https://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.esm.js';

        (async function() {

            // 1. 创建场景，树的根节点，SpriteJS 中渲染图形，都要在这个“场景”中进行。
            const container = document.getElementById('stage');
            const scene = new Scene({
                container,
                displayRatio: 2, // 设置显示分辨率
            });

            // 2. 创建layer对象，一个layer对象表示一个图层，对应一个canvas
            const fglayer = scene.layer('fglayer');

            // 1.首先看我们有什么数据 (data.json)
            const data = await (await fetch('data.json')).json();

            // 2.我们想了解什么：公园一天中的游客变化规律
            // 这里使用d3的方法对原始数据进行分类处理
            const dataset = d3.rollups(
                data, // 原始数据
                v => v.length, // 对数据分组进行汇总的方式，这里是使用 length 来汇总，也就是统计数据的条目数
                d => d.time // 对数据进行分组的属性，这里是用时间属性进行分组
            ).sort(([a],[b]) => a - b);
            //  dataset = [[8, 145], [12, 141], [18, 191], [20, 23]]
            
            // 补全6点、22点的游客数量
            dataset.unshift([6, 0]);
            dataset.push([22, 0]);

            // 3.用哪种可视化方式呈现数据：折线图
            // 转换数据为坐标点信息
            const points = [];
            dataset.forEach((d, i) => {
                const x = 20 + 20 * d[0];
                const y = 300 - (d[1] + Math.floor(Math.random()*100));
                points.push(x, y);
            });
            // spritejs展示折线图
            const p = new Polyline();
            p.attr({
                points,
                lineWidth: 2,
                strokeColor: 'green',
                smooth: true,
            });

            fglayer.append(p);
            
            // 生成缩放算子，0-24表示一天24小时，0-480表示站占据480像素宽度
            const scale = d3.scaleLinear()
            .domain([0, 24])
            .range([0, 480]);

            // 根据真实的数据，生成具体的坐标轴算子
            const axis = d3.axisBottom(scale)
            .tickValues(dataset.map(d => d[0]));

            // 创建svg元素增加坐标轴
            const axisNode = new SpriteSvg({
                x: 20,
                y: 300,
                flexible: true,
            });

            d3.select(axisNode.svg)
            .attr('width', 600)
            .attr('height', 60)
            .append('g')
            .call(axis);

            axisNode.svg.children[0].setAttribute('font-size', 20);
            fglayer.append(axisNode);
            
        }());
    </script>
</body>
</html>